<template>
	<view class="page">
		<view class="header">
			<view style="height: var(--status-bar-height);"></view>
			<view class="header-title">
				Personal center
				<image src="../../static/userInfo/setting-icon.png" mode="widthFix" @click="toPage(4)"></image>
			</view>
			<view class="user-info">
				<image :src="interfaceurl + userinfo.headImg"></image>
				{{ userinfo.username }}
			</view>
			<view class="nav">
				<view class="item" @click="toPage(0)">
					<image style="width: 53upx;" src="../../static/userInfo/nav-icon1.png" mode="widthFix"></image>
					Account
					<text style="color: #9268ff;">{{ toFixed(userinfo.usableSum) }}</text>
				</view>
				<view class="item" @click="toPage(1)">
					<image style="width: 62upx;" src="../../static/userInfo/nav-icon2.png" mode="widthFix"></image>
					Funds
					<text style="color: #ff8b36;">{{ toFixed(userinfo.pzcpamount) }}</text>
				</view>
				<view class="item" @click="toPage(2)">
					<image style="width: 49upx;" src="../../static/userInfo/nav-icon3.png" mode="widthFix"></image>
					Bills
					<text style="color: #3095f6;">{{ userinfo.mx }}</text>
				</view>
				<view class="item" @click="toPage(3)">
					<image style="width: 39upx;" src="../../static/userInfo/nav-icon4.png" mode="widthFix"></image>
					Frozen
					<text style="color: #ff365c;">{{ toFixed(userinfo.frozen_money) }}</text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index" @click="handleClick(item.path)">
					<view class="info">
						<image :src="'../../static/userInfo/list-icon' + index + '.png'" mode="widthFix" class="icon"></image>
						{{ item.title }}
					</view>
					<image src="../../static/arrow.png" mode="widthFix" class="arrow"></image>
				</view>
			</view>
			<button type="default" @click="logout">Log out</button>
		</scroll-view>
		<ZTabbar :current="4" />
	</view>
</template>

<script>
import ZTabbar from '@/components/ZTabbar/index.vue';
import fetch from '@/common/fetch.js';
export default {
	components: { ZTabbar },
	data() {
		return {
			userinfo: {},
			list: [
				{
					title: this.$t('personal.list.team'),
					path: '/pages/mymember/index'
				},
				{
					title: this.$t('personal.list.inviteFriends'),
					path: '/pages/personal/subpage/share/index'
				},
				{
					title: this.$t('personal.list.activityCenter'),
					path: '/pages/personal/subpage/activityCenter/index'
				},
				{
					title: this.$t('personal.list.customerService'),
					path: '/pages/callCenter/index'
				},
				{
					title: this.$t('personal.list.safetyManagement'),
					path: '/pages/personal/subpage/securityManager/index'
				},
				{
					title: this.$t('personal.list.aboutUs'),
					path: '/pages/personal/subpage/aboutus/index'
				}
				
			]
		};
	},
	computed: {
		interfaceurl() {
			let url = fetch.interfaceUrl();
			return url;
		}
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		/**
		 * 获取用户信息
		 */
		getUserInfo() {
			fetch.request('/ucenter/home', '', 'POST').then(res => {
				let { data } = res;
				data.mx = '-- --';
				this.userinfo = data;
				uni.setStorage({
					key: 'userInfo',
					data: data
				});
			});
		},
		toFixed(num) {
			if (num !== undefined) return num.toFixed(2);
		},
		/*
		 *退出登录
		 */
		logout() {
			fetch.request('/index/index/logout', '', 'POST').then(res => {
				if (res.code === '0' || res.code === 0) {
					uni.removeStorageSync('token');
					uni.navigateTo({
						url: '/pages/login/index'
					});
				}
			});
		},
		handleClick(item) {
			uni.navigateTo({
				url: item
			});
		},
		toPage(index) {
			let url = '';
			switch (index) {
				case 0: {
					url = '/pages/personal/subpage/accountDetail/ye';
					break;
				}
				case 1: {
					url = '/pages/personal/subpage/interest/index';
					break;
				}
				case 2: {
					url = '/pages/personal/subpage/accountDetail/index';
					break;
				}
				case 3: {
					url = '/pages/record/index?index=2';
					break;
				}
				case 4: {
					url = '/pages/myInfo/index';
					break;
				}
				default:
					break;
			}
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="less" scoped>
.page {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	overflow: hidden;
}
.header {
	height: 370upx;
	background-image: url(../../static/userInfo/userin-back.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	.header-title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36upx;
		color: #ffffff;
		font-weight: bold;
		height: 89upx;
		position: relative;
		image {
			width: 51upx;
			position: absolute;
			right: 39upx;
		}
	}
	.user-info {
		height: 180upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 31upx;
		color: #ffffff;
		font-weight: bold;
		justify-content: space-evenly;
		image {
			width: 118upx;
			height: 118upx;
			border-radius: 100upx;
			border: solid #ffffff 4upx;
			box-sizing: border-box;
			background-color: #ffc5ac;
		}
	}
	.nav {
		position: absolute;
		left: 24upx;
		right: 24upx;
		background-color: #ffffff;
		border-radius: 14upx;
		height: 190upx;
		bottom: -100upx;
		display: flex;
		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 20upx;
			justify-content: center;
			align-items: center;
			image {
				margin-bottom: 15upx;
			}
			text {
				margin-top: 5upx;
			}
		}
	}
}
.list {
	background-color: #ffffff;
	margin-left: 24upx;
	margin-right: 24upx;
	border-radius: 10upx;
	.item {
		height: 102upx;
		border-top: solid 1upx #e6e6e6;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 44upx;
		padding-right: 24upx;
		&:first-child {
			border-top: none;
		}
		.info {
			font-size: 30upx;
			display: flex;
			align-items: center;
		}
		.icon {
			width: 30upx;
			margin-right: 50upx;
		}
		.arrow {
			width: 20upx;
		}
	}
}
button {
	width: 704upx;
	height: 91upx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background-color: #ffffff;
	margin-top: 33upx;
	&::after {
		border: none;
	}
}
.scroll-Y {
	top: calc(var(--status-bar-height) + 500upx);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 140upx;
}
</style>
